<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="118px">
      <el-form-item label="统计日期范围">
        <el-date-picker
          v-model="daterangeKqrq"
          style="width: 209px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:kqgl:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading"
              border
              style="width: 130%"
              :header-cell-style="{ fontSize: '13px', color: '#555',textAlign: 'center',background:'#E0E9F0' }"
              :cell-style="{ textAlign: 'center' }"
              :data="kqglList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="所在单位" align="center" prop="dwmc" width="200" />
      <el-table-column label="总人数" align="center" prop="zrs" width="200"/>
      <el-table-column label="正常考勤数" align="center" prop="zckqrs" width="200"/>
      <el-table-column label="迟到人数" align="center" prop="cdrs" width="200"/>
      <el-table-column label="早退人数" align="center" prop="ztrs" width="200"/>
      <el-table-column label="旷工人数" align="center" prop="kgrs" width="200"/>
      <el-table-column label="请假人数" align="center" prop="qjrs" width="200"/>
      <el-table-column label="薪资应发/元" align="center" prop="xzyf" width="200"/>
      <el-table-column label="薪资实发/元" align="center" prop="xzsf" width="200"/>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import { listGztj } from "@/api/system/kqgl";
  import { getToken } from "@/utils/auth";
  import { getCurrentDateTime } from "@/utils/dateutil";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "Gztj",
    dicts: ['sys_xbm', 'sys_kqlx'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        ygmcs: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 考勤管理表格数据
        kqglList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 发票ID时间范围
        daterangeKqrq: [],

        // 导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/kqgl/importData"
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          yggh: null,
          ygxm: null,
          ygsfzjh: null,
          ygsjh: null,
          kqrq: null,
          ygxbm: null,
          kqlx: null,
          ygrx: null,
          createby: null,
          createtime: null,
          updateby: null,
          updatetime: null,
          sfsc: 0
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          ygxm: [
            { required: true, message: "员工姓名不能为空", trigger: "blur" }
          ],
          kqlx: [
            { required: true, message: "考勤类型不能为空", trigger: "blur" }
          ],
          kqrq: [
            { required: true, message: "考勤日期不能为空", trigger: "blur" }
          ],
          ygrx: [
            { required: true, message: "员工日薪/元不能为空", trigger: "blur" }
          ],
          createby: [
            { required: true, message: "录入人不能为空", trigger: "blur" }
          ],
          createtime: [
            { required: true, message: "录入时间不能为空", trigger: "blur" }
          ],
          updateby: [
            { required: true, message: "更新人不能为空", trigger: "blur" }
          ],
          updatetime: [
            { required: true, message: "更新时间不能为空", trigger: "blur" }
          ],
          sfsc: [
            { required: true, message: "是否删除,0否1是不能为空", trigger: "change" }
          ],
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询考勤管理列表 */
      getList() {
        this.loading = true;
        this.queryParams.params = {};
        if (null != this.daterangeKqrq && '' != this.daterangeKqrq) {
          this.queryParams.params["beginKqrq"] = this.daterangeKqrq[0];
          this.queryParams.params["endKqrq"] = this.daterangeKqrq[1];
        }
        listGztj(this.queryParams).then(response => {
          this.kqglList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        // 价格设置弹出层
        this.openJgsz = false;
        // 价格审批弹出层
        this.openJgsp = false;
        // 入库弹出层
        this.openRk = false;
        // 出库弹出层
        this.openCk = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          kqid: null,
          ddh: null,
          wlbm: null,
          wlmc: null,
          dw: null,
          sl: null,
          xdrq: null,
          jhrq: null,
          ggyq: null,
          gylx: null,
          jjggx: null,
          zl: null,
          khmc: null,
          dhsDeptId: null,
          deptName: null,
          deptId: null,
          ddbz: null,
          ddlx: null,
          jhshzt1: null,
          jhsh1shyj: null,
          jhsh1gxsj:null,
          jhshzt2: null,
          jhsh2shyj: null,
          jhsh2gxsj:null,
          wxddid: null,
          ghsdj: null,
          ghszj: null,
          ghsjgbz: null,
          ghsjgwhr: null,
          ghsjgwhsj: null,
          zbjgshzt1: null,
          zbjgsh1shyj: null,
          zbjgsh1shsj: null,
          zbjgshzt2: null,
          zbjgsh2shyj: null,
          zbjgsh2shsj: null,
          wllx: null,
          wlshzt1: null,
          wlsh1shyj: null,
          wlsh1gxsj: null,
          wlshzt2: null,
          wlsh2shyj: null,
          wlsh2gxsj: null,
          rkzt: null,
          rkbz: null,
          rksj: null,
          rkr: null,
          ckzt: null,
          ckbz: null,
          cksj: null,
          ckr: null,
          ddzt: null,
          createby: null,
          createtime: null,
          updateby: null,
          updatetime: null,
          sfsc: null,
          sfykp: null,
          fpid: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.daterangeKqrq = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.kqid)
        this.ygmcs = selection.map(item => item.ygmc)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        // 价格设置弹出层
        this.openJgsz = false;
        // 价格审批弹出层
        this.openJgsp = false;
        // 入库弹出层
        this.openRk = false;
        // 出库弹出层
        this.openCk = false;
        this.title = "添加考勤管理";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const kqid = row.kqid || this.ids
        getKqgl(kqid).then(response => {
          this.form = response.data;
          this.open = true;
          // 价格设置弹出层
          this.openJgsz = false;
          // 价格审批弹出层
          this.openJgsp = false;
          // 入库弹出层
          this.openRk = false;
          // 出库弹出层
          this.openCk = false;
          this.title = "修改考勤管理";
        });
      },
      /** 删除按钮操作 */
      handleUpdateRk11(row) {
        const ddids = row.kqid || this.ids;
        this.$modal.confirm('是否确认删除考勤管理编号为"' + ddids + '"的数据项？').then(function() {
          //return delKqgl(ddids);
          return 1;
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.kqid != null) {
              updateKqgl(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.openJgsz = false;
                this.getList();
              });
            } else {
              addKqgl(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const kqids = row.kqid || this.ids;
        const ygmcs = row.ygmc || this.ygmcs;
        this.$modal.confirm('是否确认删除员工"' + ygmcs + '"的考勤数据项？').then(function() {
          return delKqgl(kqids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('kqgl/tjexport', {
          ...this.queryParams
        }, `考勤统计_${new Date().getTime()}.xlsx`)
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "计划导入";
        this.upload.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        this.download('kqgl/importTemplate', {
        }, `考勤信息导入_${new Date().getTime()}.xlsx`)
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
        this.getList();
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      }
    }
  };
</script>
<style scoped>
  @import "../../assets/styles/index.css";
  ::v-deep .el-popper .popper__arrow::after,
  ::v-deep .el-popper .popper__arrow {
    display: none;
  }
  ::v-deep .el-upload-list {
    /* display: none; */
  }
  .el-icon-circle-close {
    font-size: 16px;
    color: #e65e5e;
    cursor: pointer;
    position: relative;
    top: 2px;
    left: 5px;
  }
</style>
